
	function Grid(dataSource){
		Grid.prototype.dataSource = $.isArray(dataSource) ? dataSource : [dataSource];
	}

	Grid.prototype.dataSource = null;

	Grid.prototype.selectedIndex = -1;
	
	Grid.prototype.clear= function(){
		var div = document.getElementById("gridTable");
		var tableChild = document.getElementById("table");
		if(tableChild){
			div.removeChild(tableChild);
		}
	}

	
	var conti = 0;
	
	Grid.prototype.createGrid = function(columnNames,buttons){
		var ds = Grid.prototype.dataSource;
		//creamos la tabla del grid
		$("<table role='presentation'></table>").attr('id','table').appendTo($("#gridTable"));
		$("#table").attr('class',"table");		
		//creamos el primer renglon (con el nombre de las columnas)...
		$("<tr></tr>").attr("id","columnNames").appendTo($("#table"));
		for(var i=0;i<columnNames.length;i++){
			$("<th></th>").attr("id","Column-"+i).appendTo($("#columnNames"));
			var myColumnId = "#Column-"+i;
			$(myColumnId).html(columnNames[i].label);
			if(columnNames[i].label == "Curso"){
				conti = 1;
				$(myColumnId).css('width','120px');
			}else if(columnNames[i].label == "Horario"){
				$(myColumnId).css('width','130px');
			}else if(columnNames[i].label == "Salon"){
				$(myColumnId).css('width','50px');
			}
		}
		//variables reutilizables 
		
		var myRowId;
		var columnValue;
		var button;
		var actionId;
		//creamos el resto de la tabla con sus datos...
		for(var i = 0; i < ds.length; i++){
			var tr;
			tr= $("<tr></tr>");
			tr.attr("id","Row-"+i);
			tr.attr("name","Row-"+i);
			tr.appendTo($("#table"));
			myRowId="#Row-"+i;
			
			$(tr).mouseover(function(evt){
				Grid.prototype.selectedIndex = $(evt.target).attr('name').split('-')[1];
			});

			for(var j = 0; j < columnNames.length; j++){
				var td;
				var style = '';
				var size = '';
				if(columnNames[j].value == "projectName"){
					width = 'width';
					size = '100px';
				}else if(columnNames[j].value == "projectDescription"){
					width = 'width';
					size = '300px';
				}else if(columnNames[j].value == "Action"){
					width = 'width';
					size = '100px';
				}else{
					width = '';
					size = '';
				}
				
				td = $("<td></td>");
				columnValue = columnNames[j].value;
				td.attr("name", columnValue + "-" + i);
				$(td).css('width',size);
				td.appendTo($(myRowId));
				

				if(j < columnNames.length - 1){
					td.html(ds[i][columnValue]);
				}
				else{
					for(var k=0;k<buttons.length;k++){
						var button = $('<button>')
							.attr("id",$(buttons[k]).attr('id') + "-" + i + "-" + k)
							.attr("name",$(buttons[k]).attr('name') + "-" + i + "-" + k)
							.html($(buttons[k]).html())
							.addClass($(buttons[k]).attr('class'))
							.click(
								function(evt){
									var dataSourceIdAndButtonId = evt.target.id.toString().split('-');
								  	buttons[dataSourceIdAndButtonId[2]].click();
								}
							);
						button.appendTo(td);
					}
				}
			}
			//ultima columna de acciones..
		}
	}

	Grid.prototype.excludeColumn = function(columnName, filterFunction){
		var ds = Grid.prototype.dataSource;
		for(var i = 0; i < ds.length; i++){
			if(filterFunction(ds[i])){
				$('td[name="'+columnName+'-'+i+'"]').html('<br/>');
			}
		}
	}